<template>
  <div class="container">
    <el-row>
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            :ref="formInline"
            v-model="formInline"
          >
            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model="formInline.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="Empty">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple-light" style="text-align: right;">
          <el-button
            size="small"
            type="text"
            @click="btnBack"
            v-if="this.$route.query.id"
          >
            <i class="el-icon-back"></i>返回学科</el-button
          >
          <el-button
            type="success"
            @click="dialogFormVisible = true"
            style="text-align:right "
            icon="el-icon-edit"
            size="small"
          >
            新增目录</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-alert :title="alertText" type="info" show-icon :closable="false">
    </el-alert>

    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="60" align="center" type="index">
        </el-table-column>
        <el-table-column label="所属学科" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.subjectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="目录名称" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.directoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建者" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" min-width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" min-width="150" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.totals }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              ><span v-if="scope.row.state == 0">启用</span>
              <span v-else>禁用</span></el-button
            >
            <el-button
              @click="handleEdit(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.state === 1"
              >修改</el-button
            >
            <el-button
              @click="handleDelete(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.state === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="block">
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout=" prev, pager, next, sizes,jumper"
          :current-page="currentPage.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="currentPage.pagesize"
          :total="currentPage.total"
          background
        >
        </el-pagination
      ></el-row>
    </div>

    <!-- 放置弹层 -->
    <el-dialog
      :title="showTitle"
      :visible.sync="dialogFormVisible"
      @close="btnCancel"
      width="30%"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item
          v-if="!this.$route.query.id"
          label="所属学科"
          :label-width="formLabelWidth"
          prop="subjectID"
        >
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            @focus="getSubList"
            style="width:80%"
          >
            <el-option
              v-for="item in obj"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          :label-width="formLabelWidth"
          prop="directoryName"
        >
          <el-input
            style="width:80%"
            v-model="form.directoryName"
            autocomplete="off"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  detail,
  list,
  add,
  changeState,
  remove,
  update,
} from "@/api/hmmm/directorys";
import { simple } from "@/api/hmmm/subjects";

export default {
  data() {
    return {
      disabled: true,
      formInline: {
        directoryName: "",
        state: "",
      },
      dialogFormVisible: false,
      form: {
        id: "",
        subjectID: "",
        directoryName: "",
      },
      title: null,
      //表单校验
      rules: {
        subjectID: [
          {
            required: true,
            message: "部门名称不能为空",
            trigger: "blur",
          },
        ],
        directoryName: [
          {
            required: true,
            message: "部门编码不能为空",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "部门编码要求1-50个字符",
            trigger: "blur",
          },
          {
            trigger: "blur",
          },
        ],
      },
      formLabelWidth: "120px",
      obj: [], //目录学科
      tableData: [], //表格数据
      currentPage: {
        page: 1,
        pagesize: 10,
        total: 0,
      },
      alertText: "",
      total: null,
      state: "",
      router: {
        id: "",
        name: "",
      },
    };
  },
  created() {
    //初始化数据

    // this.router = this.$route.query;
    // console.log(this.router.id);
    if (this.$route.query.id) {
      this.getDetailList();
    } else {
      this.getList(this.tableData);
    }
  },

  methods: {
    //初始化数据
    async getList(data) {
      const { data: res } = await list(data);
      console.log(res);
      this.tableData = res.items;
      this.currentPage.total = res.counts;
      this.alertText = `数据一共${res.counts}条`;
    },
    async getDetailList() {
      const { data: res } = await list({
        page: this.currentPage.page,
        pagesize: this.currentPage.pagesize,
        subjectID: this.$route.query.id,
      });
      console.log(res);

      this.tableData = res.items;
      this.currentPage.total = res.counts;
    },

    //新增目录
    async btnOK() {
      await this.$refs.form.validate(); //先做表单校验
      if (this.form.id) {
        //修改
        await update(this.form);
      } else {
        //新增
        await add({
          subjectID: this.form.subjectID,
          directoryName: this.form.directoryName,
        }); //调用增加接口，
      }
      this.getList();
      this.$message.success("操作成功");
      this.dialogFormVisible = false;
    },

    //搜索按钮
    search() {
      this.$route.query.id
        ? this.getList({ subjectID: this.$route.query.id, ...this.formInline })
        : this.getList(this.formInline);
    },

    //清空搜索
    Empty() {
      this.formInline = {
        user: "",
        region: "",
      };
      this.$route.query.id
        ? this.getList({ subjectID: this.$route.query.id, ...this.formInline })
        : this.getList();
    },

    //取消按钮
    btnCancel() {
      this.dialogFormVisible = false;
      this.form = {
        subjectID: "",
        directoryName: "",
      };
      this.$refs.form.resetFields();
    },

    //禁止/启用
    async handleClick(val) {
      try {
        await changeState({
          id: val.id,
          state: val.state === 1 ? 0 : 1,
        });
        this.getList(this.tableData);
        this.$message.success("操作成功");
      } catch (error) {
        this.$message.error("操作失败");
        console.log(error);
      }
    },

    // 修改
    async handleEdit(row) {
      this.form.subjectID = row.subjectName;
      this.form.directoryName = row.directoryName;
      const { data } = await detail(row);
      this.form = data;
      // console.log(this.form.id);

      // console.log(this.id);
      this.dialogFormVisible = true;
      // return this.form.data.id
    },

    //删除
    async handleDelete(row) {
      try {
        await this.$confirm("确定要删除吗");
        await remove(row);
        this.$message.success("删除成功");
        this.getList();
        // console.log(row);
      } catch (error) {
        this.$message.error("删除失败");
        console.log(error);
      }
    },

    //更改页码
    handleSizeChange(pagesize) {
      this.currentPage.pagesize = pagesize;
      this.getList(this.currentPage);
    },
    //当前页数
    handleCurrentChange(page) {
      this.currentPage.page = page;
      this.getList(this.currentPage);
      // console.log(`当前页: ${page}`);
    },
    //下拉选择框
    async getSubList() {
      const { data } = await simple();
      console.log(data);
      this.obj = data;
      // console.log(this.obj);
    },
    btnBack() {
      this.$router.back();
    },
  },
  computed: {
    showTitle() {
      return this.form.id ? "修改目录" : "新增目录";
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  margin: 10px 15px 0 10px;
  padding: 20px 25px 0 20px;
  background-color: white;
}
</style>
